<template>
  <div class="baidu-map-mark">
    <div id="bdMarkMap" style="width: 100%;height: 500px;"></div>
  </div>
</template>
<script>
import BMap from "BMap";
import BMapLib from "BMapLib";
import "@/libs/bdMap/DrawingManager_min.css";
import { debug } from "util";

var map;
var drawingManager;
export default {
  name: "BMarkMap-Model",
  data() {
    return {
      longitude: "", // 经度
      latitude: "", // 纬度
      marksArray: [], // 记录所有已经打的点
      overlays: [], // 保存点
      type: "",
      icon: {},
      mapLocation: this.$store.state.userinfo.org.mapLocation
        ? JSON.parse(this.$store.state.userinfo.org.mapLocation)
        : "",
      currMark: {}
    };
  },
  created() {
    let that = this;
    that.longitude = that.mapLocation.lon || "106.500945";
    that.latitude = that.mapLocation.lat || "29.613468";
    that.$nextTick(() => {
      // 地图初始化
      map = new BMap.Map("bdMarkMap", { enableMapClick: false });
      map.centerAndZoom(new BMap.Point(that.longitude, that.latitude), 15);
      map.enableScrollWheelZoom(true); //滚轮事件
      //初始化地图绘制工具
      that.initMapTool();
    });
  },
  methods: {
    //初始化标注工具
    initMapTool() {
      let that = this;
      $(".baidu-map-mark .BMapLib_Drawing").remove();
      if (drawingManager) {
        drawingManager = 0;
      }
      drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: false, //是否显示工具栏
        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
          offset: new BMap.Size(5, 5), //偏离值
          drawingModes: [BMAP_DRAWING_MARKER]
        }
      });
      drawingManager.addEventListener("overlaycomplete", that.overlaycomplete);
    },
    overlaycomplete(e) {
      let that = this;
      map.removeOverlay(that.overlays[0]);
      that.overlays = [];
      //只有点的概念
      that.overlays.push(e.overlay);
      if (that.currMark) {
        map.removeOverlay(that.currMark);
      }
      var gc = new BMap.Geocoder();
      var addr = "";
      that.addMarker(e.overlay.point.lng, e.overlay.point.lat);
      gc.getLocation(e.overlay.point, function(rs) {
        var addComp = rs.addressComponents;
        addr =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber;
        that.$emit(
          "newMarkPoint",
          e.overlay.point.lng,
          e.overlay.point.lat,
          addr,
          that.type
        );
      });
      that.setdrawingType(true);
    },
    /**切换标注模式 */
    setdrawingType(isOpen) {
      if (isOpen) {
        if (!drawingManager.isOpen) {
          drawingManager.close();
          drawingManager.open();
          drawingManager.setDrawingMode(BMAP_DRAWING_MARKER);
        }
      } else {
        drawingManager.close();
      }
    },
    // 增加标注点
    addMarker(longitude, latitude) {
      let that = this;
      var point = "";
      var marker = "";
      that.setMapMarkInfo(
        that.icon,
        that.type,
        { lon: longitude, lat: latitude, markName: "" },
        true
      );
      map.centerAndZoom(point, 16);
      map.enableScrollWheelZoom();
    },
    //展示已标注列表的点
    addSavedMarker(longitude, latitude, type, icon) {
      let that = this;
      var point = "";
      var marker = "";
      that.setMapMarkInfo(
        icon,
        type,
        { lon: longitude, lat: latitude, markName: "" },
        false
      );
      map.centerAndZoom(point, 16);
      map.enableScrollWheelZoom();
    },
    // 设置地图标注点信息
    setMapMarkInfo(icon, markType, datavalue, isAdd) {
      let that = this;
      let selectedType = markType;

      that.marksArray = [];
  
      if (!icon) {
        icon = new BMap.Icon(
          "https://img.kdlayun.com/dic/rdspFile_1533814566104.png",
          new BMap.Size(45, 45),
          {
            anchor: new BMap.Size(23, 23),
            imageSize:new BMap.Size(45, 45),
          }
        );
      } else {
        icon = new BMap.Icon(icon, new BMap.Size(40, 40),{
          anchor: new BMap.Size(23, 23),
          imageSize:new BMap.Size(45, 45),
        });
      }

      var marker = new BMap.Marker(
        new BMap.Point(datavalue.lon, datavalue.lat),
        {
          icon: icon
        }
      );
      that.marksArray.push(marker);

      var label = new BMap.Label(datavalue.markName, {
        offset: new BMap.Size(-25, -25)
      });
      label.setStyle({
        display: "none",
        color: "red",
        fontSize: "12px",
        height: "25px",
        lineHeight: "20px",
        "padding-left": "20px",
        "padding-right": "20px",
        "max-width": "none",
        "min-width": "80px",
        fontFamily: "微软雅黑"
      });
      marker.setLabel(label);
      map.addOverlay(marker);
      map.removeOverlay(that.overlays[0]);

      if (isAdd) {
        that.currMark = marker;
      }
    },
    // 定位功能
    pointCenter(longitude, latitude) {
      var point = "";
      var marker = "";
      point = new BMap.Point(longitude, latitude);
      map.panTo(point);
      setTimeout(() => {
        map.centerAndZoom(point, 16);
      }, 500);
      map.enableScrollWheelZoom();
    },
    //显示初始定位
    fixedTypeCenter(longitude, latitude) {
      var point = new BMap.Point(longitude, latitude);
      var marker = new BMap.Marker(point); // 点覆盖物
      map.centerAndZoom(point, 14);
    },
    saveSuccess() {
      if (drawingManager) {
        drawingManager = 0;
      }
    },
    clearMarkPoint() {
      // 清除地图标记点
      if (map) {
        map.clearOverlays();
      }
    }
  }
};
</script>

